<demo>
## 自定义配置
基于 `Form`、`FormItem` 组件封装，支持其所有属性和插槽
</demo>

<!-- #region snippet -->
<script setup>
import { QuestionCircleOutlined } from '@ant-design/icons-vue'
</script>

<template>
  <x-search
    :columns="3"
    :label-col="{ style: { width: '100px' } }"
  >
    <x-search-item>
      <template #label>
        规则名称
        <a-tooltip title="规则名称是唯一的 key">
          <question-circle-outlined class="ml-4-1" />
        </a-tooltip>
      </template>
      <a-input />
    </x-search-item>
    <x-search-item label="状态">
      <a-input />
    </x-search-item>
    <x-search-item suffix>
      <a-space>
        <a-button>重置</a-button>
        <a-button
          ghost
          type="primary"
        >
          查询
        </a-button>
      </a-space>
    </x-search-item>
  </x-search>
</template>

<style lang="less" scoped></style>
<!-- #endregion snippet -->
